<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
  import resize from '@/components/Charts/mixins/resize'
    export default {
        mixins: [resize],
        name: "MyChart",
        props:{
          className: {
            type: String,
            default: 'chart'
          },
          width: {
            type: String,
            default: '100%'
          },
          height: {
            type: String,
            default: '100%'
          },
          autoResize: {
            type: Boolean,
            default: true
          },
          options:{
            type:Object,
            require:true
          }
        },
        data(){
          return {
            chart:null,
            chartOpt:this.options
          }
        },
        mounted() {
          this.$nextTick(() => {
            this.initChart();
          })
        },
        beforeDestroy() {
          if (!this.chart) {
            return
          }
          this.chart.dispose()
          this.chart = null
        },
        methods:{
          initChart(){
            this.chart = echarts.init(this.$el)
            this.chart.setOption(this.options);
          }
        },
        watch:{
          chartOpt:{
            handler(newValue,oldValue){
              if (this.chart){
                this.chart.setOption(newValue);
              }else {
                this.initChart();
              }
            },
            deep:true
          }

        }

    }
</script>

<style scoped>
.chart{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
